<template>
  <div id="UserDetail">
    <main-header :title="'用户管理'" :crumbsArr="crumbsArr" />
    <div class="user_detail_main" >
      <el-tabs
        type="border-card"
        v-model="cTab"
        @tab-click="clickTab(cTab)"
      >
        <el-tab-pane
          v-for="tab in tabsConfig"
          :key="tab.idx"
          :label="tab.name"
          :name="tab.idx"
          v-loading="tabsConfig[cTab].loading"
          element-loading-text="加载中"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <component
            v-if="cView === tab.component"
            :is="cView"
            :userNickName="userNickName"
            :data="tabsConfig[cTab].data"
            :userInfo="userInfo"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MainHeader from '@/components/layouts/MainHeader'
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
import PersonalData from '@/components/pages/user/PersonalData'
import PersonalAssets from '@/components/pages/user/PersonalAssets'
export default {
  name: 'UserDetail',
  components: {
    MainHeader,
    PersonalData,
    PersonalAssets
  },
  data () {
    return {
      userNickName: '-',
      cView: 'PersonalData', // 当前激活的组件
      cTab: '0', // 当前tab页ID
      tabsConfig: [ // tabs参数
        {
          idx: '0', name: '个人资料', loading: false, component: 'PersonalData', data: null
        },
        {
          idx: '1', name: '个人资产', loading: false, component: 'PersonalAssets', data: null
        }
        // { idx: '2', name: '问卷信息', loading: false, component: 'PersonalData' },
        // { idx: '3', name: '购买历史', loading: false, component: 'PersonalData' },
        // { idx: '4', name: '手术资料', loading: false, component: 'PersonalData' },
        // { idx: '5', name: '分诊记录', loading: false, component: 'PersonalData' },
        // { idx: '6', name: '查询记录', loading: false, component: 'PersonalData' },
        // { idx: '7', name: '回访记录', loading: false, component: 'PersonalData' }
      ],
      userInfo: null
    }
  },
  computed: {
    crumbsArr () {
      return [ // 面包屑
        { name: 'welcome', txt: '首页' },
        { name: 'user', txt: '用户管理' },
        { name: 'user_detail', txt: this.userNickName }
      ]
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 确保每次打开路由 打开的是第一个tab页面
      vm.cTab = '0'
      vm.cView = 'PersonalData'
      window.setTimeout(() => vm.initPage(), 100)
    })
  },
  watch: {
    '$route' (to, from) {
      // if (to.name === 'user_detail') {
      //   this.initPage()
      // }
      if (from.name === 'user_detail') {
        this.userNickName = '-'
      }
    }
  },
  filters: {
  },
  methods: {
    initPage () { // 初始化页面
      this.loadData()
    },
    loadData (cView = this.cView) {
      this[`init${cView}`]() // 根据当前tab页不同调用不同的初始化方法
    },
    async initPersonalData () { // 初始化个人资料tab
      this.tabsConfig[this.cTab].loading = true
      const { id } = this.$route.params
      const response = await API.queryAccountDetail({ id })
      this.tabsConfig[this.cTab].loading = false
      const { code, data } = response
      if (code === 1) {
        this.userNickName = data.passportAccountInfo.nickname
        this.tabsConfig[this.cTab].data = data
        this.userInfo = data
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    async initPersonalAssets () { // 初始化个人资产tab
      this.tabsConfig[this.cTab].loading = true
      const { id } = this.$route.params
      const response = await API.personAssetsProfile({ id })
      this.tabsConfig[this.cTab].loading = false
      const { code, data } = response
      if (code === 1) {
        this.tabsConfig[this.cTab].data = data
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    clickTab (cTab) {
      const { component } = this.tabsConfig[this.cTab]
      this.cView = component // 切换当前的组件
      this[`init${this.cView}`]() // 根据当前tab页不同调用不同的初始化方法
    }
  }
}
</script>

<style scoped lang="scss">
  .user_detail_main {
    padding: 20px 20px 0;
  }
  .el-tab-pane {
    box-sizing: border-box;
    min-height: 100px;
    padding: 20px;
  }
</style>
